import React, { useState } from 'react'
import style from './style.module.scss'
import { InfoCircleFilled, EyeOutlined } from '@ant-design/icons/lib'
import ModalView from '../../ModalView'
import { useRecoilState } from 'recoil'
import { CreamInfoMock } from './mock'
import { ArrowDownOutlined } from '@ant-design/icons'

interface IInfoBtnProps {
    width: string
    height: string
    imgId: string
}

export default function InfoBtn(props: IInfoBtnProps) {
    const [creamInfo, setCreamInfo] = useRecoilState(CreamInfoMock)
    const [expend, setExpend] = useState(false)

    return (
        <>
            <div
                className={style.container}
                onClick={() => {
                    setExpend(!expend)
                }}
                style={{
                    ['--width' as any]: props.width,
                    ['--height' as any]: props.height
                }}>
                <InfoCircleFilled />
                <span>信息</span>
            </div>
            {expend ? (
                <ModalView
                    onClose={() => {
                        setExpend(false)
                    }}>
                    <div className={style.info__container}>
                        <span className={style.title}>信息</span>
                        <span className={style.sub__title}>上传时间： {creamInfo.updateAt}</span>
                        <div className={style.info__item}>
                            <div className={style.item}>
                                <div className={style.item__title}>
                                    <EyeOutlined className={style.icon} />
                                    <span>浏览</span>
                                </div>
                                <span className={style.num}>{creamInfo.view}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.item__title}>
                                    <ArrowDownOutlined className={style.icon} />
                                    <span>下载次数</span>
                                </div>
                                <span className={style.num}>{creamInfo.download}</span>
                            </div>
                        </div>

                        <div className={style.line} />

                        <div className={style.info__item}>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>相机品牌</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.creamMake}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>相机型号</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.creamModel}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>焦距</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.focalLength}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>光圈</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.aperture}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>快门速度</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.shutterSpeed}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>ISO</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.ISO}</span>
                            </div>
                            <div className={style.item}>
                                <div className={style.cream__title}>
                                    <span>分辨率</span>
                                </div>
                                <span className={style.cream__parameter}>{creamInfo.dimensions}</span>
                            </div>
                        </div>
                    </div>
                </ModalView>
            ) : (
                ''
            )}
        </>
    )
}
